<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <script>

    // 1.普通函数中存在this的标识符
    // function foo() {
    //   console.log("foo", this)
    // }

    // foo()  window
    // foo.apply("aaa")  string

    // 2.箭头函数中, 不存在this
    // var bar = () => {
    //   console.log("bar:", this)
    // }
    // bar()  //window  变量的查找规则
    // 通过apply调用时, 也是没有this
    // bar.apply("aaaa")  //window

    // console.log("全局this:", this)
    // var message = "global message"

    // 3.this的查找规则
    var obj = {
      name: "obj",
      foo: () => {
        // 该作用域中没有this
        var bar = () => {
          console.log("bar:", this)
        }
        return bar
      }
    }
    // var fn = obj.foo()
    // fn.apply("bbb") //window 

    // 网络请求的工具函数
    function request(url, callbackFn) {
      var results = ["abc", "cba", "nba"]
      callbackFn(results)
    }

    // 实际操作的位置(业务)
    var obj = {
      names: [],
      network: function() {
        // 1.最初写法
        // var _this = this  //this=>obj
        // request("/names", function(res) {
        //   _this.names = [].concat(res)
        // })

        // 2.箭头函数写法
        request("/names", (res) => {
          this.names = [].concat(res)
        })
      }
    }

    obj.network()
    console.log(obj)

  </script>

</body>
</html>